<template>
    <div class="shop">
        <div class="ShopCart">
            <CartTop class="box_top"></CartTop>
            <CartMiddle class="box_middle"></CartMiddle>
        </div>
    </div>
    <van-submit-bar  decimal-length="2" class="box_bottom" :price="total" :button-text="`结算(${totalNum})`" @submit="onSubmit">
        <van-checkbox v-model="isCheck">全选</van-checkbox>
        <template #tip>
            <div class="vip">
                <span> V 开通Pro会员,预计可省￥9.8</span>
                <span @click="onClickLink">立即开通</span>
            </div>
        </template>
    </van-submit-bar>
</template>

<script setup lang="ts">
import {ref,computed,onMounted} from 'vue'
import { showToast } from 'vant';
import CartTop from './components/CartTop/index.vue'
import CartMiddle from './components/CartMiddle/index.vue'
import {useRouter} from 'vue-router';
import useCartStore from '@/store/cart';
const cartStore = useCartStore()


const cartList1 = computed(()=>{
    return cartStore.cartData.cartList
})
const cartList2 = computed(()=>{
    return cartStore.cartData.cartList2
})
console.log('>>>',cartList1.value)
console.log('----',cartList2.value)

let totalPrice1 = computed(()=>{
    return cartList1.value.reduce((prev,item)=> prev + item.price * item.number,0)
})
let totalNum1 = computed(()=>{
    return cartList1.value.reduce((prev,item)=> prev + item.number,0)
})
let totalPrice2 = computed(()=>{
    return cartList2.value.reduce((prev,item)=> prev + item.price * item.number,0)
})
let totalNum2 = computed(()=>{
    return cartList2.value.reduce((prev,item)=> prev + item.number,0)
})
let total = computed(()=>{
    return total.value = (totalPrice1.value + totalPrice2.value)*100
})
let totalNum = computed(()=>{
    return total.value = totalNum1.value + totalNum2.value
})





const router = useRouter()
const isCheck = ref(true)

const onSubmit = () => {
    router.push('/settlement')
};
const onClickLink = () => showToast('别氪金了');

onMounted(()=>{
    cartStore.getCartData()
})
</script>

<style lang="scss" scoped>
.shop {
    .ShopCart {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgb(244, 244, 244);
    }

    .box_top {
        margin: 12px;
    }

    .box_middle {
        margin: 0 12px 12px;
    }
}
.box_bottom {
    background-color: rgb(244, 244, 244);
    bottom: 50px;
    width: 100%;
}
.vip{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}
</style>